<html>
  <head>
    <meta charset="utf8">
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  </head>
  <body>
    <div id="vue-app"></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <style>
      .abc {
        display : inline
      }
    </style>
    <script>
      let options = {
        template:` 
          <div>
            <span>姓名：</span>
            <el-input class="abc" v-model="userinfo.name" />
          </div>
          <div>
            <span>电话：</span>
            <el-input class="abc" v-model="userinfo.phone"></el-input>
          </div>
          <div>
            <span>性别：</span>
            <el-select v-model="userinfo.gender">
              <el-option label="男" value="male"></el-option>
              <el-option label="女" value="female"></el-option>
            </el-select>
          </div>
          <div>
            <el-button @click="sumbit()">提交</el-button>
          </div>
        `,
        data: function() {
          return {
            userinfo: {
              name: '',
              phone: '',
              gender: ''
            }
          }
        },
        methods: {
          sumbit: function() {
            //let method1 = (this.userinfo.id == undenfined)?'post':'put' 
            let method = (location.search == '')?'post':'put' 
            axios[method]('/user', this.userinfo).then((res)=>{
              res = res.data
              if(res.code == 0) {
                alert('操作成功')
                location.href = './index.vue.html'
              } else
                alert('添加失败')
            })
          }
        },
        mounted: function() {
          let id = new URLSearchParams(location.search).get('id')
          if(id != null) {
            axios.get('/user?id='+ id).then((res) =>{
              this.userinfo = res.data.data
            })
          } 
        }
      }
      let ppz = Vue.createApp(options)
      ppz.use(ElementPlus)
      ppz.mount('#vue-app')
  </script>
  </body>
</html>